<template>
	<view class="individual-page">
		<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
		<view class="main">
			<view class="list">
				<view class="list-item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
					<view class="text">
						{{item.title}}
					</view>
					<view class="right">
						<view class="box" v-if="item.id==1">
							<view class="avatar" :style="{ backgroundImage: 'url(' + item.avatar + ')' }"></view>
						</view>
						<view class="box" v-if="item.id==2">
							<view class="ncikName">
								{{item.nickname}}
							</view>
						</view>
						<view class="box" v-if="item.id==3">
							<view class="tel">
								{{structure(item.tel)}}
							</view>
						</view>
						<view class="icon">
						</view>
					</view>
				</view>
			</view>
			<view class="save">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import navgatsVue from '../../../common/navgats/navgats.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "个人信息",
					bgColor: "#f6f6f6"
				},
				dataList: [{
					id: 1,
					title: "头像",
					avatar: "/static/avatar.png"
				}, {
					id: 2,
					title: "昵称",
					nickname: "伐开心丶长命君"
				}, {
					id: 3,
					title: "手机号",
					tel: "13905228208"
				}, {
					id: 4,
					title: "收货地址"
				}]
			}

		},
		components: {
			navgatsVue
		},
		methods: {
			//手机号加密
			structure(array) {
				let arrBox = [...array];
				var str = '';
				arrBox.map((res, index) => {
					if (index > 3 && index < 8) {
						str += '*';
					} else {
						str += res;
					}
				});
				return str;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.individual-page {
		width: 100vw;
		height: 100vh;

		.main {
			width: 100%;
			height: calc(100% - 180rpx);
			background-color: #f6f6f6;
			display: flex;
			flex-direction: column;
			align-items: center;

			.list {
				width: 100%;
				height: calc(100% - 180rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20rpx;

				.list-item {
					width: 90%;
					height: 100rpx;
					background-color: white;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.text {
						font-size: 32rpx;
						margin-left: 30rpx;
					}

					.right {
						margin-right: 30rpx;
						display: flex;
						align-items: center;

						.box {
							margin-right: 20rpx;

							.avatar {
								width: 60rpx;
								height: 60rpx;
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
								border-radius: 50%;
							}

							.ncikName,
							.tel {
								color: #9f9f9f;
								font-size: 30rpx;
							}
						}

						.icon {
							width: 20rpx;
							height: 20rpx;
							background-image: url("/static/my/right_ccc.svg");
							background-size: contain;
						}
					}
				}

				.list-item:nth-child(1) {
					border-radius: 20rpx 20rpx 0px 0px;
				}

				.list-item:nth-child(3) {
					border-radius: 0px 0px 20rpx 20rpx;
				}

				.list-item:nth-child(4) {
					margin-top: 20rpx;
					border-radius: 20rpx;
				}
			}

			.save {
				width: 90%;
				height: 100rpx;
				background-color: #fbd748;
				color: black;
				border-radius: 50rpx;
				text-align: center;
				line-height: 100rpx;
				margin-top: 30rpx;
				font-weight: bold;
				font-size: 34rpx;
			}
		}
	}
</style>